<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <div class="flex w-1/3 p-6 shadow-lg rounded-lg flex-col bg-white">
      <re-input title="密码" titleWidth="6">
        <el-input placeholder="请输入密码" v-model="password" type="password" />
      </re-input>
      <el-button
        style="margin-top: 1.5rem"
        type="primary"
        icon="el-icon-upload"
        @click="clickSubmit"
        >提交
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { modifyPwd } from "/@/api/staff";
import ReInput from "/@/components/ReInput/index.vue";
import { errorMessage, successMessage } from "/@/utils/message";
import { storageSession } from "/@/utils/storage";

export default {
  components: { ReInput },
  setup() {
    const password = ref("");

    const clickSubmit = async () => {
      const res = await modifyPwd(password.value);
      if (res.code === 1) {
        successMessage(res.message);
        storageSession.removeItem("info");
        location.reload();
      } else {
        errorMessage(res.message);
      }
    };
    return {
      password,
      clickSubmit
    };
  }
};
</script>

<style scoped></style>
